<template>
    <div class="broadcasts-content">
            <div class="carousel-title-A"  @click="Castlistdetailpage">
                <span class="selection-broadcasts">精选播单</span> 
                <!-- <span class="mores">更多</span>  -->
            </div>
            <div>
           <van-swipe :loop="false" :show-indicators="false" :width="150" :height="200">
                <van-swipe-item>
                    <div class="carousel">
                            <div class="carousel-item">
                                    <img src="http://p1.music.126.net/4L--5jGuNNCdRxL10n_0-g==/19057835044326350.jpg?param=140y140">
                                    <p>“为什么受伤的总是我？”|爱的学习手册</p>
                            </div>
                    </div>
                </van-swipe-item>
                <van-swipe-item>
                      <div class="carousel">
                            <div class="carousel-item">
                                    <img src="http://p1.music.126.net/2rux5LnJey75tm9Md-9D-Q==/2890616070443534.jpg?param=140y140">
                                    <p>“日式清新向｜超治愈的清新日语歌单</p>
                            </div>
                    </div>
                </van-swipe-item>
                 <van-swipe-item>
                      <div class="carousel">
                            <div class="carousel-item">
                                    <img src="http://p1.music.126.net/3RANMlMM-udSsHyInyVbrQ==/528865105234307.jpg?param=140y140">
                                    <p>“助眠辑 | 自然音，伴灵动乐符萦绕耳畔</p>
                            </div>
                    </div>
                </van-swipe-item>
                 <van-swipe-item>
                      <div class="carousel">
                            <div class="carousel-item">
                                    <img src="http://p1.music.126.net/ACdcatIwH63UUaUKMOpzLQ==/109951168620062161.jpg?param=140y140">
                                    <p>“极致的爱意能融化冰雪</p>
                            </div>
                    </div>
                </van-swipe-item>
                 <van-swipe-item>
                      <div class="carousel">
                            <div class="carousel-item">
                                    <img src="http://p1.music.126.net/4kfPsvxjCshmNujARzoRsA==/109951168599347892.jpg?param=140y140">
                                    <p>“全场焦点，击中你的心脏</p>
                            </div>
                      </div>
                </van-swipe-item>
                 <van-swipe-item>
                      <div class="carousel">
                            <div class="carousel-item">
                                    <img src="http://p1.music.126.net/xuyzd8MNMEUO3Nx6_GFsUw==/109951168564502313.jpg?param=140y140">
                                    <p>“自然之音/沉浸大自然 静谧与美好之中</p>
                            </div>
                    </div>
                </van-swipe-item>
                 <van-swipe-item>
                      <div class="carousel">
                            <div class="carousel-item">
                                    <img src="http://p1.music.126.net/mUlmUzGS__KYfcJH6aekDg==/109951168625532022.jpg?param=140y140">
                                    <p>“甜醉微醺｜chill氛围 我们都是上瘾的囚犯</p>
                            </div>
                    </div>
                </van-swipe-item>
               <van-swipe-item class="swipe-item-last">
                更多...

               </van-swipe-item>
            </van-swipe>
        </div>
    </div>
</template>

<script>
import { useRouter } from 'vue-router';
import { defineComponent} from 'vue';

// const router = useRouter();
// router.push('/goGroadcast');

export default defineComponent({
  setup() {
    const router = useRouter();
    const Castlistdetailpage = () => {
      router.push('/goGroadcast');
    };
    return {
      Castlistdetailpage,
    };
  },
     data(){
            return {
                carouselData:[
                    {
                        imgUrl:'/src/images/p1.jpg',
                        description:'陪你入睡'
                    },
                     {
                        imgUrl:'/src/images/p2.jpg',
                        description:'倾诉和分享者' 
                    }, {
                        imgUrl:'/src/images/p3.jpg',
                        description:'催眠小故事'
                    }, {
                        imgUrl:'/src/images/p4.jpg',
                        description:'心理FM主播'
                    }, {
                        imgUrl:'/src/images/p5.jpg',
                        description:'心理FM主播'
                    }, {
                        imgUrl:'/src/images/p6.jpg',
                        description:'唱跳rap🏀Music'
                    }, {
                        imgUrl:'/src/images/p7.png',
                        description:'天使与你同在，你本来就很美'
                    }, {
                        imgUrl:'/src/images/p2.jpg',
                        description:'洗涤你的心灵'
                    },
                ]
            }
         },
});


 
</script>


<style scoped>
.carousel-title-A{
    margin-top:10px;
    width: 100%;
    height:50px;
}
.selection-broadcasts{
     float: left;
    margin-left: calc(50% - 30px);
    font-size:15px;
    font-weight: bold;
    line-height:50px;
}
.mores{
    font-size:12px;
    line-height:50px;
    color:gray;
    float:right;
    margin-right: 15px;
}
.van-swipe-item{
     margin-left:5px;
     margin-right:5px;
}
.carousel-item img{
    width: 150px;
    height: 150px;
}
.carousel-item p{
    font-size:13px;
}
.swipe-item-last{
    /* display:none; */
    /* text-align: center; */
    font-size: 24px;
    line-height: 140px;

}

</style>